<template>
  <div style="display:flex;flex-direction:column">
    <div style="display:flex;justify-content:space-between">
      <div>
        <p-form-item label="车间" style="display:flex;">
          <p-select  option-filter-prop="children" style="width:150px"
                :filter-option="filterOption"
                v-model="active.workroomname">
            <p-select-option 
                @click="QueryData(value)"
                :key="value.workroomno"
                :value="value.workroomname"
                v-for="value in linenoCode"
                >{{value.workroomname}}</p-select-option>
          </p-select> 
        </p-form-item>
      </div>
       <div>
        <p-form-item label="线体"  style="display:flex;">
          <p-select  option-filter-prop="children" style="width:150px"
                :filter-option="filterOption"
                v-model="activeList.linename">
            <p-select-option  
                @click="lineClick(value)"
                :key="value.lineno"
                :value="value.linename"
                v-for="value in list"
                >{{value.linename}}</p-select-option>
          </p-select> 
        </p-form-item>
      </div>
      <div>
        <p-form-item label="组别"  style="display:flex;">
          <p-select  option-filter-prop="children" style="width:150px"
                :filter-option="filterOption"
                v-model="activeClass.classname">
            <p-select-option 
             @click="ClassClick(value)"
                :key="value.classno"
                :value="value.classname"
                v-for="value in list"
                >{{value.classname}}</p-select-option>
          </p-select> 
        </p-form-item>
      </div> 
      <div>
         <p-button type="primary" @click="searchList">查找</p-button>
      </div>
    </div>
    <div style="display:flex;justify-content:space-between;padding:0 20px;margin-top:20px">
      <div style="font-size:16px">人员清单</div>
      <div>
        <p-input-search placeholder="王浩" v-model="searchInput" style="width: 150px" @search="onSearch"/>
      </div>
    </div>
    <!--富余人力维护-人员清单： Table表格 -->
    <div style="margin-top:5px">
      <p-table
        ref="table"
        size="middle"
        bordered
        rowKey="empno"
        :columns="columns"
        :scroll="tableScroll"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :customRow="clickThenSelect"
        @change="handleTableChange"
      >
        <template slot="redundantStaff" slot-scope="text,row">
           <p-switch 
           @change="onChange"  
           @click="handleChange(text,row)"
           checked-children="是" 
           un-checked-children="否" 
           :defaultChecked="text"/>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            alt="图片不存在"
            style="max-width:80px;font-size: 12px;font-style: italic;"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
          <p-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)"
          >下载</p-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <p-divider type="vertical" />
          <p-dropdown>
            <a class="ant-dropdown-link">
              更多
              <p-icon type="down" />
            </a>
            <p-menu slot="overlay">
              <p-menu-item>
                <p-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </p-popconfirm>
              </p-menu-item>
              <template
                v-if="cgButtonLinkList && cgButtonLinkList.length>0"
                v-for="(btnItem,btnIndex) in cgButtonLinkList"
              >
                <p-menu-item :key=" 'cgbtnLink'+btnIndex " v-if="showLinkButton(btnItem,record)">
                  <a
                    href="javascript:void(0);"
                    @click="cgButtonLinkHandler(record,btnItem.buttonCode,btnItem.optType)"
                  >
                    <p-icon v-if="btnItem.buttonIcon" :type="btnItem.buttonIcon" />
                    {{ btnItem.buttonName }}
                  </a>
                </p-menu-item>
              </template>
            </p-menu>
          </p-dropdown>
        </span>
      </p-table>
    </div>
  </div>
</template>


<script>
import { postAction, getAction, deleteAction } from "@/api/manage";
import Vue from "vue";

export default {
  name: "",
  props:{
    linenoCode:{
      default:''
    },
    selectData:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      //传参
      adjustPageParam:{
        classno:'',
        lineno:'',
        workroomno:'',
        keyword:''
      },
      empno:'',//是否富裕人力
      dataSource:'',//默认数据
      //搜索框内容
      searchInput:"",
      active:"",
      list:"",
      activeList:"",
      activeClass:'',
      EnhanceJS: "",
      cgButtonLinkList: [],
      cgButtonList: [],
      title: "", //存表名
      groupTag: [],
      queryInfo: [],
      code: "",
      // 表头
      columns: [],
      //列设置
      settingColumns: [],
      //列定义
      defColumns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "线体",
          dataIndex: "linename",
          key: "linename",
          // width: "15%",
          align: "center",
          scopedSlots: { customRender: "linename" },
        },
        {
          title: "工号",
          dataIndex: "empno",
          key:"empno",
          key: "empno",
          // width: "40%",
          align: "center",
          scopedSlots: { customRender: "empno" },
        },
        {
          title: "姓名",
          dataIndex: "empname",
          key: "empname",
          // width: "40%",
          align: "center",
          scopedSlots: { customRender: " empname" },
        },

        {
          title: "技能",
          dataIndex: "skillElements",
          key: "skillElements",
          align: "center",
          customRender: function (t, r, index) {
            let text=""
            t.forEach(item=>{ text+=item.name+","})
            return text
          },
        },
        {
          title: "岗位标记",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "operation" },
        },
        {
          title: "已排工时",
          dataIndex: "haveRowTime",
          key:"haveRowTime",
          align: "center",
          scopedSlots: { customRender: "haveRowTime" },
        },
          {
          title: "是否富余人力",
          dataIndex: "spared",
          key:"spared",
          align: "center",
          scopedSlots: { customRender: "redundantStaff" },
        }
      ],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      url: {
        //富余人力维护
        list: "/mes-manufacture/mfSurplusManpower/list/surplus",
        //新增富裕人力维护
        AddPeople:"/mes-manufacture/mfSurplusManpower",
        //删除富裕人力维护
        DeletePeople:"/mes-manufacture/mfSurplusManpower/"
      },
    };
  },
  mounted(){
      this.active=this.linenoCode[0]
      this.list=this.active.lines
      this.activeList=this.list[0]
      this.activeClass=this.list[0]
      this.loadData();
  },
  created() {
    this.initColumns();
    this.setdefColumns();
  },
  methods: {
    //关键字搜索
    onSearch(){ 
     this.loadData()
    },
    searchList(){
       this.loadData()
    },
    // 选择车间拉取线体，组别
    QueryData(data){
      this.active=data
      this.list=data.lines
      this.activeList=data.lines[0]
      this.activeClass=data.lines[0]
    },
    lineClick(data){
      this.activeList=data
    },
    ClassClick(data){
      this.activeClass=data
    },
    // 是否富裕人力
    handleChange(text,t){
     this.ajax(this.empno,t)
    },
    onChange(text){
      this.empno=text
    },
    
    ajax(data,list){
        let newData={
          classsno:list.classsno,
          empno:list.empno,
          lineno:list.lineno,
          workroomno:list.workroomno
        }
        if(data){
          postAction(this.url.AddPeople,newData).then(res=>{
            if(res.success){
              this.$message.success("富裕人力添加成功");
            }
            if(res.code===510){
            this.$message.warning("富裕人力添加失败") 
          }
          })
        }else{
          console.log(list.empno)
          deleteAction(this.url.DeletePeople+"/"+list.empno).then(res=>{
            if(res.success){
              this.$message.success("富裕人力删除成功");
            }
             if(res.code===510){
            this.$message.warning("富裕人力删除失败") 
          }
          })
        }
    },
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record.classname, [record]);
          },
        },
      };
    },
    tableScroll: function () {
      if (this.columns.length > 13) {
        return { x: this.columns.length * 150 - 450 };
      }
    },
    setdefColumns() {
      if (this.columns.length > 13) {
        let arrLength = this.columns.length - 1;
        this.columns.forEach((item, index) => {
          item["width"] = 130;
        });
        this.columns[arrLength]["fixed"] = "right";
        this.columns[0]["fixed"] = "left";
        this.columns[1]["fixed"] = "left";
      }
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
      var key = this.$route.name + ":colsettings";
      let colSettings = Vue.ls.get(key);
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = [];
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex);
        });
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      } else {
        this.settingColumns = colSettings;
        const cols = this.defColumns.filter((item) => {
          if (item.key == "rowIndex" || item.dataIndex == "action") {
            return true;
          }
          if (colSettings.includes(item.dataIndex)) {
            return true;
          }
          return false;
        });
        this.columns = cols;
      }
    },

    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ":colsettings";
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000);
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter((item) => {
        if (item.key == "rowIndex" || item.dataIndex == "action") {
          return true;
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true;
        }
        return false;
      });
      this.columns = cols;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.selectedMainId = "";
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedMainId = selectedRowKeys;
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows[0];
    },
    // 加载富裕人力维护列表
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!");
        return;
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.onClearSelected();
      this.loading = true;
      this.adjustPageParam ={
        classno:this.activeClass.classno,
        lineno:this.activeList.lineno,
        workroomno:this.active.workroomno,
        keyword:this.searchInput,
        pageNo:this.ipagination.current,
        limit:this.ipagination.pageSize
      };
      console.log(this.adjustPageParam)
      postAction(this.url.list,this.adjustPageParam).then((res) => {
        if (res.success) {
          this.dataSource = res.data.records;
          this.ipagination.total = res.data.total;
        }
        if (res.code === 510) {
          this.$message.warning(res.msg);
        }
        this.loading = false;
      });
    },
   handleTableChange(page,size){
     this.ipagination.current=page.current
     this.ipagination.pageSize=page.pageSize
     this.loadData()
   }
  },
};
</script>

<style scoped lang="less">

</style>